<template>
  <view class="settings-page">
    <nav-header title="设置"></nav-header>
    
    <view class="content" :style="{ paddingTop: statusBarHeight + 44 + 'px' }">
      <!-- Account Settings -->
      <view class="settings-section">
        <view class="section-title">账号设置</view>
        <view class="settings-list">
          <view class="settings-item" @click="editUserInfo">
            <text class="item-label">个人资料</text>
            <view class="item-right">
              <text class="arrow">›</text>
            </view>
          </view>
          <view class="settings-item" @click="changePassword">
            <text class="item-label">修改密码</text>
            <view class="item-right">
              <text class="arrow">›</text>
            </view>
          </view>
          <view class="settings-item" @click="manageAccount">
            <text class="item-label">账号管理</text>
            <view class="item-right">
              <text class="arrow">›</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- App Settings -->
      <view class="settings-section">
        <view class="section-title">应用设置</view>
        <view class="settings-list">
          <view class="settings-item">
            <text class="item-label">通知提醒</text>
            <view class="item-right">
              <switch 
                :checked="settings.notification" 
                @change="updateSetting('notification', $event.detail.value)"
                color="#5ac725"
              />
            </view>
          </view>
          <view class="settings-item">
            <text class="item-label">提醒完善简历</text>
            <view class="item-right">
              <switch 
                :checked="settings.remindToComplete" 
                @change="updateSetting('remindToComplete', $event.detail.value)"
                color="#5ac725"
              />
            </view>
          </view>
          <view class="settings-item">
            <text class="item-label">深色模式</text>
            <view class="item-right">
              <switch 
                :checked="settings.darkMode" 
                @change="updateSetting('darkMode', $event.detail.value)"
                color="#5ac725"
              />
            </view>
          </view>
          <view class="settings-item">
            <text class="item-label">自动同步</text>
            <view class="item-right">
              <switch 
                :checked="settings.autoSync" 
                @change="updateSetting('autoSync', $event.detail.value)"
                color="#5ac725"
              />
            </view>
          </view>
        </view>
      </view>
      
      <!-- About Settings -->
      <view class="settings-section">
        <view class="section-title">关于</view>
        <view class="settings-list">
          <view class="settings-item" @click="viewPrivacyPolicy">
            <text class="item-label">隐私政策</text>
            <view class="item-right">
              <text class="arrow">›</text>
            </view>
          </view>
          <view class="settings-item" @click="viewTermsOfService">
            <text class="item-label">用户协议</text>
            <view class="item-right">
              <text class="arrow">›</text>
            </view>
          </view>
          <view class="settings-item" @click="checkUpdate">
            <text class="item-label">检查更新</text>
            <view class="item-right">
              <text class="version-number">v1.0.0</text>
              <text class="arrow">›</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- Logout Button -->
      <view class="logout-btn" @click="confirmLogout">
        <text>退出登录</text>
      </view>
    </view>
    
    <!-- Logout Confirmation -->
    <uni-popup ref="logoutPopup" type="dialog">
      <uni-popup-dialog
        title="退出登录"
        content="确定要退出登录吗？"
        :before-close="false"
        @confirm="logout"
        @close="closeLogoutPopup"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '@/store/user.js'
import { useAuthStore } from '@/store/index';
import NavHeader from '@/components/nav-header.vue'
import { getToken, saveToken, removeToken } from '@/utils/auth';

const userStore = useUserStore()
const authStore = useAuthStore();
const statusBarHeight = ref(20)
const logoutPopup = ref(null)
const settings = reactive({
  notification: true,
  remindToComplete: true,
  darkMode: false,
  autoSync: true,
  language: 'zh-cn'
})

onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight
  
  // 加载设置
  loadSettings()
})

// 加载设置
const loadSettings = () => {
  // 从Store获取设置
  const userSettings = userStore.settings
  if (userSettings) {
    Object.assign(settings, userSettings)
  }
}

// 更新设置
const updateSetting = (key, value) => {
  settings[key] = value
  
  // 保存到Store
  userStore.updateSettings({ [key]: value })
  
  // 如果是深色模式，需要更新UI
  if (key === 'darkMode') {
    // 实现深色模式的逻辑
    uni.showToast({
      title: value ? '已开启深色模式' : '已关闭深色模式',
      icon: 'none'
    })
  }
}

// 修改个人信息
const editUserInfo = () => {
  uni.navigateTo({
    url: '/pages/resume/edit/personal'
  })
}

// 修改密码
const changePassword = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 账号管理
const manageAccount = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 查看隐私政策
const viewPrivacyPolicy = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 查看用户协议
const viewTermsOfService = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 检查更新
const checkUpdate = () => {
  uni.showLoading({
    title: '检查中...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '当前已是最新版本',
      icon: 'none'
    })
  }, 1500)
}

// 确认退出登录
const confirmLogout = () => {
  if (getToken()) {
    logoutPopup.value.open()
  } else {
    uni.showToast({
      title: '您尚未登录',
      icon: 'none'
    })
  }
}

// 关闭退出登录弹窗
const closeLogoutPopup = () => {
  logoutPopup.value.close()
}

// 退出登录
const logout = () => {
  authStore.logout()
  userStore.logout()
  uni.removeStorageSync('loginInfo') // 清除本地用户信息
  uni.removeStorageSync('isLogined') // 清除登录状态

  // 提示
  uni.showToast({
    title: '已退出登录',
    icon: 'success'
  })
  
  // 返回首页
  setTimeout(() => {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }, 1500)
}
</script>

<style lang="scss" scoped>
.settings-page {
  min-height: 100vh;
  background-color: #F8F8F8;
  
  .content {
    padding: 16px;
    padding-bottom: 30px;
  }
  
  .settings-section {
    margin-bottom: 20px;
    
    .section-title {
      font-size: 14px;
      color: #999;
      margin-bottom: 8px;
      padding: 0 4px;
    }
    
    .settings-list {
      background-color: #FFFFFF;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      
      .settings-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        height: 56px;
        border-bottom: 1px solid #f5f5f5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .item-label {
          font-size: 15px;
          color: #333;
        }
        
        .item-right {
          display: flex;
          align-items: center;
          
          .version-number {
            font-size: 13px;
            color: #999;
            margin-right: 8px;
          }
          
          .arrow {
            font-size: 20px;
            color: #ccc;
            transform: rotate(90deg);
          }
        }
      }
    }
  }
  
  .logout-btn {
    margin-top: 30px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #ff4d4f;
    color: #FFFFFF;
    font-size: 16px;
    border-radius: 22px;
  }
}
</style> 